<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){
		//在pageId的位置异步加载page页面	
		//$("#pageId").load("doPageUI",function(){
		//异步加载日志信息(页面加载完成以后)
		//doGetObjects();
		//});
		//如上写法进行简化 如果写小括号就是立即执行
		$("#pageId").load("doPageUI",doGetObjects)
		//对查询按钮进行事件注册
		$(".input-group-btn").on("click",".btn-search",doQueryObjects)
		//删除按钮
		$(".input-group-btn").on("click",".btn-delete",doDeleteObjects)
		//全选按钮
		//change函数一般用于状态变化事件注册
		$("#checkAll").change(doChangeTBodyCheckBoxState);
		
		//tbody中checkbox事件注册
		$("#tbodyId").on("change",".cBox",doChangeTHeadCheckBoxState);
	})
	//修改thead中checkbox对象的状态
	function doChangeTHeadCheckBoxState(){
		//1.定义一个初始状态值
		var flag=true;
		//2.获取tbody中搜哟checkbox对象的状态值 然后记性逻辑与操作
		$("#tbodyId input[type='checkbox']")
		.each(function(){
			flag=flag&&$(this).prop("checked")
		})
		//3.跟新thead中checkbox的状态值
		$("#checkAll").prop("checked",flag);
	}
	
	//修改tbody中checkbox对应的状态
	function doChangeTBodyCheckBoxState(){
		//1.获取thead中全选checkbox对象的状态
		var flag = $(this).prop("checked");
		//2.设置tbody中checkbox对象的状态
		$("#tbodyId input[type='checkbox']").prop("checked",flag); 
	}
	//获取选中记录的id值
	function doGetCheckedIds(){
		//定义一个数组，用户存储获取的记录id值
		var idArray=[];
		//1.获取tbody中的所有checkbox对象
		$("#tbodyId input[type='checkbox']")
		//2.迭代所有checkbox对象获取选中值 当发现元素会执行callback
		.each(function(){//callback
			//$(this)在理代表input类型为checkbox对象
			//prop("checked")表示获取checked属性的值
			if($(this).prop("checked")){
				//存储checkbox对应的value属性值
				idArray.push($(this).val());
			}
		});
		//返回选中记录的id值
		return idArray;
	}
	//处理删除按钮业务
	function doDeleteObjects(){
		//debugger
		//1.获取页面上用户选中的记录id 并进行判定
		var idArray=doGetCheckedIds();
		if(idArray==0){
			alert("请先选中")
			return;
		}
		//2.确认删除提示信息
		//confirm为windows对象的一个函数
		if(!confirm("确认删除吗"))return;
		//3.发送异步请求执行删除操作
		//3.1定义请求参数
		var params={"ids":idArray.toString()}
		//3.2定义请求url
		var url="log/doDeleteObjects";
		//3.3发送异步请求 执行删除操作
		//post提交的时候使用(url,[params],[callback])为jquery中的一个异步请求函数
		$.post(url,params,function(result){
			if(result.state==1){
				//alert("delete ok");
				alert(result.message);
				//doGetObjects();
				doRefreshPageAfterDelete();
			}else{
				alert(result.message);
			}
		})
	}
	///删除完成以后刷新页面
	function doRefreshPageAfterDelete(){
		//1.获取当前页码值，总页数
		var pageCurrent=$("#pageId").data("pageCurrent");
		var pageCount=$("#pageId").data("pageCount");
		//2.获取thead中checkbox的状态值
		var flag=$("#checkAll").prop("checked");
		//3.基于条件修改当前页码值 并重新查询
		if(pageCurrent==pageCount&&pageCurrent>1&&flag){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		//查询文本框中有数据 则清空文本框
		$("#searchNameId").val("");
		doGetObjects();
	}
	
	function doQueryObjects(){
		//1.修改当前页码值
		$("#pageId").data("pageCurrent",1);
		//2.基于条件进行查询
		doGetObjects();
	}
	
	//异步查询日志信息
	function doGetObjects(){
		//初始化全选checked对象的状态
		$("#checkAll").prop("checked",false);
		//1.定义请求参数
		//var params = "pageCurrent=1";//json格式对象
		//假如当前页码值没有值(undefined)则赋值为1
		var pageCurrent=$("#pageId").data("pageCurrent")
		if(!pageCurrent){
				pageCurrent=1
		}
		var params = {"pageCurrent":pageCurrent};
		var uname=$("#searchNameId").val();
		if(uname)params.username=uname
		/* var params = {"pageCurrent":1}; */
		
		//2.定义请求的url
		var url="log/doFindPageObjects"
		//3.发送异步请求 获取服务端数据 并更新到页面
		//getJSON为jquert的一个异步请求函数 可以向服务端发起get请求
		//getJSON简单语法结构getJSON(url,[params],[callback]，[dataType]);
		//$:代表jQuery对象
		$.getJSON(url,params,function(result){ //回滚
			//此函数在服务端数据返回以后 由客户端对象调用
			//console.log(result)//转换为JsonResult
			doHandleResponseResult(result);
		});
	}
	//处理响应结果(两种请求：正常 异常)
	function doHandleResponseResult(result){
		if(result.state==1){
			//1.将日志记录呈现在页面上
			doSetTableBodyRows(result.data.records)
			//2.将分页信息呈现在页面上
			doSetPagination(result.data)
		}else{//Error
			alert(result.message);
		}
	}
	function doSetTableBodyRows(records){
		//1.获取tbody对象并清空内容
		var tBody=$("#tbodyId");  
		tBody.empty();
		//2.将数据最加到tbody对象中
		for(var i=0;i<records.length;i++){
			//1.创建tr对象
			var tr=$("<tr></tr>");
			//2.创建多个td对象
			var tds=doCreateTds(records[i]);
			//3.将td追加到tr中
			tr.append(tds);
			//4.将tr追较大tbody中
			tBody.append(tr);
		}
	}
	 function doCreateTds(data){
		   var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"+
			   	 "<td>"+data.username+"</td>"+
			     "<td>"+data.operation+"</td>"+
			     "<td>"+data.method+"</td>"+
			     "<td>"+data.params+"</td>"+
			     "<td>"+data.ip+"</td>"+
			     "<td>"+data.time+"</td>";	   
			return tds;
	   }
    
</script>






